/**
 * 头部组件
 * 包含视图切换、日期导航、操作按钮等
 */

import type { ScheduleContext, ViewMode, DateRange } from '../../../types'

interface HeaderProps {
  context: ScheduleContext
  viewMode: ViewMode
  dateRange: DateRange
}

export function Header({ context, viewMode, dateRange }: HeaderProps) {
  const handleViewChange = (mode: ViewMode) => {
    context.setViewMode(mode)
  }

  const handlePrevPeriod = () => {
    const { start, end } = dateRange
    const startDate = new Date(start)
    const daysDiff = Math.ceil(
      (new Date(end).getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
    )

    // 向前移动一个周期
    startDate.setDate(startDate.getDate() - daysDiff - 1)
    const endDate = new Date(startDate)
    endDate.setDate(startDate.getDate() + daysDiff)

    context.setDateRange({
      start: formatDate(startDate),
      end: formatDate(endDate),
    })
  }

  const handleNextPeriod = () => {
    const { start, end } = dateRange
    const startDate = new Date(start)
    const daysDiff = Math.ceil(
      (new Date(end).getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)
    )

    // 向后移动一个周期
    startDate.setDate(startDate.getDate() + daysDiff + 1)
    const endDate = new Date(startDate)
    endDate.setDate(startDate.getDate() + daysDiff)

    context.setDateRange({
      start: formatDate(startDate),
      end: formatDate(endDate),
    })
  }

  const formatDate = (date: Date): string => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  }

  const formatDisplayDate = (dateStr: string): string => {
    const date = new Date(dateStr)
    const month = date.getMonth() + 1
    const day = date.getDate()
    return `${month}月${day}日`
  }

  return (
    <div className="schedule-header">
      <div className="view-controls">
        <button
          className={`btn btn-primary ${viewMode === 'day' ? 'active' : ''}`}
          onClick={() => handleViewChange('day')}
        >
          日视图
        </button>
        <button
          className={`btn btn-primary ${viewMode === 'week' ? 'active' : ''}`}
          onClick={() => handleViewChange('week')}
        >
          周视图
        </button>
        <button
          className={`btn btn-primary ${viewMode === 'month' ? 'active' : ''}`}
          onClick={() => handleViewChange('month')}
        >
          月视图
        </button>
      </div>

      <div className="date-navigation">
        <button className="nav-btn" onClick={handlePrevPeriod}>
          ‹
        </button>
        <div className="current-range">
          {formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}
        </div>
        <button className="nav-btn" onClick={handleNextPeriod}>
          ›
        </button>
      </div>

      <div className="header-actions">
        <button
          className="btn btn-primary"
          onClick={() => {
            // 触发添加班次事件，由其他插件处理
            context.emit('ui:add-shift')
          }}
        >
          添加班次
        </button>
      </div>
    </div>
  )
}
